<!--  -->
<template>
  <div>
    <div v-if="btnIsShow">
    <h3 class="tile">学校通知</h3> 
    <div><el-popover
    ref="popover"
    placement="right"
    title="请注意错别字"
    width="20"
    trigger="hover"
        >
     <el-button  slot="reference" type="primary" plain @click="upload">修改通知</el-button>
  </el-popover>
  </div>
     

    
     </div>
     <el-dialog title="修改通知" :visible.sync="dialogFormVisible">
  <el-form :model="reqNotes">
    <el-form-item label="上半部分" :label-width="formLabelWidth">
      <el-input type="textarea" v-model="reqNotes.notes1" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="下半部分" :label-width="formLabelWidth">
   <el-input type="textarea" v-model="reqNotes.notes2"></el-input>

    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateNotes">确 定</el-button>
  </div>
</el-dialog> 

       <el-carousel :interval="5000" type="card" height="200px">
     <el-carousel-item  v-for="(item,index) in listImg" :key="index">
     <h3 class="small">
            <img :src="item.url" alt />
          </h3>
     </el-carousel-item>
    </el-carousel>
 
  <div class="font">
    
    <span class="notes" id="notes1" v-text="this.notes.notes1"></span>
    <el-divider></el-divider>
    <span class="notes" id="notes2" v-text="this.notes.notes2"></span>
  </div>

 </div>
</template>

<script>
export default {
  data () {
    return {
        notes:{
            notes1:'青春是一个短暂的美梦, 当你醒来时, 它早已消失无踪',
            notes2:'少量的邪恶足以抵消全部高贵的品质, 害得人声名狼藉'
        },
        reqNotes:{
            notes1:'',
            notes2:'',
        },
      visible: false,
      dialogFormVisible: false,
      
        formLabelWidth: '120px',
      btnIsShow:false,
      listImg:[
        {url:require("../../assets/jpg1.jpg")},
        {url:require("../../assets/jpg2.jpg")},
        {url:require("../../assets/jpg3.jpg")}
         ],
         
    };
  },

  components: {},


    created(){
      this.isManager();
    },
  methods: {
     //更改通知
    updateNotes(){
        //发送ajax
        const{data : res} = this.axios.post('upNotes',this.reqNotes)
        if(res.flag=='200'){
            this.notes = res.data
            this.reqNotes.notes1 = this.notes.notes1
            this.reqNotes.notes2 = this.notes.notes2
        }else{
            this.$message.error("exception")
        }
    },

     //dialog
      upload(){
        this.dialogFormVisible = !this.dialogFormVisible
        const h = this.$createElement;
        this.$notify({
          title: '提示',
          message: h('i', { style: 'color: teal'}, '请注意错别字')
        });
      },
      //是否为系主任
        isManager(){
           //获取登录者状态 window.seesion.getItem
            let i = 1;
           //if user.state==1, this.btnIsShow==true, else  this.btnIsShow==false
           if(i==1){
                 this.btnIsShow==true
                 this.reqNotes.notes1 = this.notes.notes1
                 this.reqNotes.notes2 = this.notes.notes2
                 console.log(this.reqNotes);
           }
        }
 }
}

</script>
<style >
.tile{
  text-align: center;
  margin-right: 90px;
  color: rgba(58, 78, 38, 0.632);
}
.el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    /* opacity: 0.75; */
    line-height: 200px;
    margin: 0;
  }
  
  .small img {

  width: 100%;
  height: 100%;
}
.notes{
  
  margin-left: 20px;
 font-style:oblique
}

</style>